<template>
    <div class="process">
        <div class="header">
            <p @click="back" class="back">
                <Icon type="chevron-left"></Icon>
            </p>
            <div class="title">
                发布轻学习
            </div>
        </div>
        <div style="margin-top: 44px">
            <imgCut @callback="callback" item="0" style="width: 100vw;height: 60vw" :width="400"
                    :height="240">
                <img style="width: 100vw;height: 60vw" v-show="processList[0].base64" :src="processList[0].base64">
                <p v-show="!processList[0].base64"
                   style="position: absolute;
                        top:50%;
                        font-size: 17px;
                        color: #aaa;
                        width: 200px;
                        left: 50%;
                        margin-left: -100px;
                        text-align: center">点击添加封面图片</p>
                <div v-show="processList[0].isLoading" class="loading">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </imgCut>
        </div>
        <div class="division"></div>
        <input @click.stop type="text" v-model="processTitle" style="width: 100%;
                text-align: center;
                height: 65px;
                font-size: 20px;
                border: none" placeholder="点击添加标题">
        <div class="division"></div>
        <div class="toollist">
            <p style="font-size: 17px;
            text-align: left;
            padding-left: 20px;
            line-height: 40px">所需工具</p>
            <ul>
                <li class="toolitem" v-for="(item,index) in toolList">
                    <input class="itemname" type="text" v-model="item.name" placeholder="工具名称">
                    <input type="text" class="itemnum" placeholder="标量" :max="10" :min="1" v-model="item.num"></input>
                </li>
            </ul>
            <p @click="addTool" class="addline">再加一行</p>
        </div>
        <div class="division"></div>
        <div class="processlist">
            <ul>
                <li class="processitem" v-for="(item,index) in processList.slice(1)">
                    <imgCut @callback="callback" :item="index+1" style="width: 100vw;height: 60vw" :width="400"
                            :height="240">
                        <img style="width: 100vw;height: 60vw" v-show="item.base64" :src="item.base64">
                        <p v-show="!item.base64"
                           style="position: absolute;
                        top:50%;
                        font-size: 17px;
                        color: #aaa;
                        width: 200px;
                        left: 50%;
                        margin-left: -100px;
                        text-align: center">点击添加步骤图</p>
                        <div v-show="item.isLoading" class="loading">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </imgCut>
                    <Input v-model="item.content" type="textarea" placeholder="步骤说明"></Input>
                </li>
            </ul>
            <p @click="addProcess" class="addline">再加一行</p>
        </div>
        <p class="publishprocess" @click="publishProcess">发布这个轻学习</p>
    </div>
</template>

<script>
    import {imgCut} from 'vue-imgcut';
    import * as appInfo from '@/conf/appInfo';
    import loadingImage from './image/loading.gif';

    export default {
        name: 'addProcess',
        data() {
            return {
                processTitle: '',
                loading: loadingImage,
                processList: [{
                    name: 'cover',
                    base64: undefined,
                    src: undefined,
                    content: '封面',
                    isLoading: false
                }, {
                    base64: undefined,
                    src: undefined,
                    content: undefined,
                    isLoading: false
                }],
                toolList: [
                    {
                        name: '',
                        num: 0
                    }
                ],
                publishFlag: true
            };
        },
        components: {
            imgCut
        },
        methods: {
            back() {
                if (document.referrer.match(appInfo.host) > 0) {
                    window.history.back();
                } else {
                    this.$router.push({
                        name: 'index'
                    });
                }
            },
            callback(img, item) { // 回调 根据this.item改变值
                this.processList[item].base64 = img;
                this.processList[item].isLoading = true;
                const file = this.$Utils.base2file(img, {type: 'image/jpeg'});
                const formData = new FormData();
                formData.append('file', file, `${this.CONF.user.nickname}.jpg`);
                this.$Api.uploadImage(formData).then((res) => {
                    this.processList[item].src = res.body.img_url;
                    this.processList[item].isLoading = false;
                    console.log(this.processList);
                }).catch((err) => {
                    console.log(err);
                });
            },
            addTool() {
                this.toolList.push({
                    name: '',
                    num: 0
                });
            },
            addProcess() {
                this.processList.push({
                    base64: undefined,
                    src: undefined,
                    content: undefined,
                    isLoading: false
                });
            },
            publishProcess() {
                this.processList.map((item, index) => {
                    if (index === 0 && !item.src) {
                        this.$Modal.info({
                            content: '请补添加封面图~'
                        });
                        this.publishFlag = false;
                    } else if (!item.src || !item.content) {
                        this.$Modal.info({
                            content: '请补全流程~'
                        });
                        this.publishFlag = false;
                    }
                    return 1;
                });
                this.toolList.map((item) => {
                    if (!item.name || !item.num) {
                        this.$Modal.info({
                            content: '请补全工具~'
                        });
                        this.publishFlag = false;
                    }
                    return 1;
                });
                if (this.publishFlag) {
                    const processList = [];
                    this.processList.map((item) => { // 添加
                        processList.push({
                            content: item.content,
                            src: item.src
                        });
                        return 1;
                    });
                    const title = this.processTitle;
                    const toolList = this.toolList;
                    this.$Api.addProcess({
                        title,
                        processList,
                        toolList
                    }).then((res) => {
                        console.log(res);
                        if (res.ok) {
                            this.publishFlag = true;
                            this.$router.push({name: 'reviewProcess', query: {id: res.body.process_id}
                            });
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
                }
            }
        }
    };
</script>

<style lang="scss">
    .process {
        .header {
            position: fixed;
            top: 0px;
            height: 44px;
            width: 100%;
            z-index: 999;
            background: rgb(253, 163, 62);
            display: flex;
            .back {
                line-height: 44px;
                position: fixed;
                left: 0px;
                color: white;
                width: 44px;
                height: 44px;
            }
            .title {
                justify-content: center;
                line-height: 44px;
                width: 100%;
                font-size: 17px;
                color: white;
                font-weight: 300;
            }
        }
        .division {
            width: 100%;
            height: 10px;
            background: whitesmoke;
        }
        .uploading {
            position: absolute;
            width: 100%;
            img {
                border-radius: 50%;
                &::after {
                    content: '正在上传...';
                    display: block;
                    font-size: 15px;
                    width: 30vw;
                }
            }
        }
        .toolitem {
            width: 100%;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px #eee solid;
            input {
                border: none;
                height: 40px;
                line-height: 30px;
                font-size: 16px;
                padding-left: 20px;
            }
            .itemname {
                width: 70vw;
            }
            .itemnum {
                width: 30vw;
                height: 40px;
                .ivu-input-number-input {
                    border: none;
                    box-shadow: none;
                    outline: none;
                }
            }
        }
        .processlist {
            .processitem {
                margin-bottom: 20px;
                textarea {
                    font-size: 16px;
                }
            }
        }
        .publishprocess {
            width: 100vw;
            height: 40px;
            font-size: 18px;
            color: white;
            line-height: 40px;
            background: rgb(253, 163, 62);
        }
        .addline {
            color: rgb(253, 163, 62);
            font-size: 16px;
            width: 100%;
            padding-left: 20px;
            text-align: left;
            height: 40px;
        }
        .loading {
            position: absolute;
            width: 80px;
            height: 40px;
            top: 50%;
            left: 50%;
            margin: -20px 0 0 -40px;
        }
        .loading span {
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: rgb(253, 163, 62);
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load {
            0%, 100% {
                height: 40px;
                background: rgb(253, 163, 62);
            }
            50% {
                height: 70px;
                margin: -15px 0;
                background: rgb(253, 100, 62);
            }
        }
        .loading span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
        }
        .loading span:nth-child(3) {
            -webkit-animation-delay: 0.4s;
        }
        .loading span:nth-child(4) {
            -webkit-animation-delay: 0.6s;
        }
        .loading span:nth-child(5) {
            -webkit-animation-delay: 0.8s;
        }
    }
</style>
